<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title>Title</title>
    <!--CSS六种选择器-->
    <style>
        /*id选择器，id等于i1*/
        #i1{
            background-color: aqua;
            height: 50px;
        }
        /*class选择器，class等于c1*/
        .c1{
            background-color: bisque;
            height: 50px;
        }
        /*标签选择器，所有div应用此样式*/
        div {
            background-color: blueviolet;
            color: aqua;
        }
        /*关联选择器，用空格分隔,span标签下面的div应用此样式 */
        span div {
            background-color: bisque;
            color: blueviolet;
        }
        .c1 div{}
        .c1 div p {}
        .c1 .c2 div {}

        /*组合选择器，用逗号分隔，id等于i1和id等于i2和id等于i3的都应用此样式*/
        #i1,#i2,#i3 {
            background-color: chartreuse;
            color: inherit;
        }
        .c1,.c2,.c3{}

        /*属性选择器，中括号内为属性，input标签中，属性type=text的标签应用此样式*/
        input[type='text'] {
            width: 100px;
            height: 200px;
        }
        input[n='text'] /*n为自定义属性*/
        .c1[type='text']

    </style>

<h3>优先级：标签上的style，其他按照编写顺序</h3>
</head>
<body>


<div style="background-color: aqua;height: 50px;">111</div>    <!--标签的style属性-->
<div id="i1">111</div>      <!--id选择器，id不能重复，以#开头-->
<div class="c1">222</div>   <!--class选择器，可重复，以.开头-->

<div class="c1 c2"></div>   <!--一个标签可以应用多个样式-->




</body>
</html>